<script setup lang="ts">
import { onMounted, ref } from 'vue'
import AnnualProcurementVehicles from './components/annual-procurement-vehicles.vue'
import AnnualSalesVehicles from './components/annual-sales-vehicles.vue'
import AnnualSalesCustomer from './components/annual-sales-customer.vue'
import AnnualProcurementCustomer from './components/annual-procurement-customer.vue'
import AnnualSales from './components/annual-sales.vue'
import AnnualProcurement from './components/annual-procurement.vue'
// 仅在本页引入 H5 分析样式，避免影响 Web 端其他页面
import '@/h5/analysis.css'

const loading = ref(false)
// 默认年份为当前年，便于联动后端年度接口
const currentYear = new Date().getFullYear()
const yearId = ref<number>(currentYear)

// 提供可选年份（近 5 年）
const yearOptions = Array.from({ length: 5 }, (_, i) => currentYear - i)

async function init() {
  console.log('数据分析页面初始化，年份:', yearId.value)
  if (loading.value)
    return
  loading.value = true
  // 这里无需集中拉取数据，子组件会在 props 变更时自行调用 API
  loading.value = false
}

onMounted(() => {
  init()
})
</script>

<template>
  <page-container>
    <div class="analysis-page">
      <a-space class="mb-16" align="center">
        <span>年份</span>
        <a-select v-model:value="yearId" style="width: 120px">
          <a-select-option v-for="y in yearOptions" :key="y" :value="y">{{ y }}</a-select-option>
        </a-select>
      </a-space>

      <a-row :gutter="[12, 12]">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <AnnualSales :year-id="yearId" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <AnnualProcurement :year-id="yearId" />
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <AnnualSalesVehicles :year-id="yearId" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <AnnualProcurementVehicles :year-id="yearId" />
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <AnnualSalesCustomer :year-id="yearId" :customer-id="0" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <AnnualProcurementCustomer :year-id="yearId" :customer-id="0" />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </page-container>
</template>

<style scoped>
.analysis-page {
  padding: 16px;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.mb-16 {
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .analysis-page {
    padding: 8px;
  }
  .mb-16 {
    margin-bottom: 12px;
  }
}
</style>